// 定义 Vue 登录组件
// 必须有 ElementUI, axios 的支持
Vue.component("login",{
    props:["base-url"],
    data(){
        return {
            loginWinVisiable: false,
            pwdWinVisiable: false,
            forgetWinVisiable: false,
            user:{},
            pwd:{},
            forget:{}
        };
    },
    template:`
        <div>
            <el-dialog title="登录窗口" :visible.sync="loginWinVisiable">
              <el-form>
                <el-form-item label="用户名" label-width="100px">
                  <el-input v-model="user.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="100px">
                    <el-input v-model="user.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="loginWinVisiable = false">取 消</el-button>
                <el-button type="primary" @click="login">确 定</el-button>
              </div>
            </el-dialog>
            
            <el-dialog title="修改密码" :visible.sync="pwdWinVisiable">
              <el-form>
                <el-form-item label="原密码" label-width="100px">
                  <el-input v-model="pwd.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" label-width="100px">
                    <el-input v-model="pwd.newPassword" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="pwdWinVisiable = false">取 消</el-button>
                <el-button type="primary" @click="modifyPwd">确 定</el-button>
              </div>
            </el-dialog>
            
            <el-dialog title="忘记密码" :visible.sync="forgetWinVisiable">
              <el-form>
                <el-form-item label="用户名" label-width="100px">
                  <el-input v-model="forget.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码" label-width="100px">
                  <el-input v-model="forget.vcode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" label-width="100px">
                    <el-input v-model="forget.newPassword" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="forgetWinVisiable = false">取 消</el-button>
                <el-button type="primary" @click="sendEmail">发送验证码</el-button>
                 <el-button type="primary" @click="modifyPwd1">修改密码</el-button>
              </div>
            </el-dialog>
        </div>
    `,
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("username",this.user.username);
            p.append("password",this.user.password);
            axios.post(this.baseUrl+"/login", p).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.user = res.data.data;
                    // 发布vue组件事件
                    this.$emit("logined", this.user);
                    this.loginWinVisiable = false;
                    if(res.data.data.backURI){
                        location.href = res.data.data.backURI;
                    }
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        logout(){
            axios.post(this.baseUrl+"/logout").then(res=>{
                this.$message(res.data.msg);
                this.user = {};
                // 发布vue组件事件
                this.$emit("logined", null);
            })
        },
        openLoginWin(){
            this.loginWinVisiable = true;
        },
        openPwdWin(){
            this.pwdWinVisiable = true;
        },
        modifyPwd(){
            let p = new URLSearchParams();
            p.append("newPassword",this.pwd.newPassword || "");
            p.append("password",this.pwd.password || "");
            axios.post(this.baseUrl+"/modifyPwd", p).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.pwdWinVisiable = false;
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        openForgetWin(){
            this.forgetWinVisiable = true;
        },
        sendEmail(){
            axios.post(this.baseUrl+"/forgetPwd?username="+this.forget.username).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        modifyPwd1(){
            let p=new URLSearchParams();
            p.append("newPassword",this.forget.newPassword);
            p.append("vcode",this.forget.vcode);
            axios.post(this.baseUrl+"/modifyPwd1",p).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.forgetWinVisiable = false;
                } else {
                    this.$alert(res.data.msg);
                }
            })
        }
    },
    created(){
        // 默认的地址前缀 ""
        this.baseUrl = this.baseUrl || "";
        if(location.search == '?tologin'){
            this.$alert("请先登录系统!");
            this.openLoginWin();
        } else {
            axios.get(this.baseUrl+"/myinfo").then(res=>{
                if(res.data.code){
                    this.user = res.data.data;
                    this.$emit("logined", this.user);
                }
            })
        }
    }
})

